<template>
  <el-dialog title="详情" v-model="visible" width="700">
    <div class="main">
      <div class="dec">数据统计至前一天</div>
      <div class="type">优惠券名称：{{ activityType }}</div>
      <el-card style="width: 100%" shadow="never" custom-class="notice-dialog">
        <div class="card">
          <div class="card-item">
            <div class="title"
              >用券总成交额<el-tooltip content="使用该优惠券的订单付款总金额" placement="top"
                ><el-icon><QuestionFilled /></el-icon></el-tooltip
            ></div>
            <div class="num">￥{{ statisticData.turnover }}</div>
          </div>
          <div class="card-item">
            <div class="title"
              >优惠总金额<el-tooltip content="使用该优惠券优惠的总金额" placement="top"
                ><el-icon><QuestionFilled /></el-icon></el-tooltip
            ></div>
            <div class="num">￥{{ statisticData.discounts }}</div>
          </div>
          <div class="card-item">
            <div class="title"
              >用券笔单价<el-tooltip
                content="用券总成交额 / 使用该优惠券的付款订单数"
                placement="top"
                ><el-icon><QuestionFilled /></el-icon></el-tooltip
            ></div>
            <div class="num">￥{{ statisticData.unitPrice }}</div>
          </div>
        </div>
      </el-card>
      <el-card style="width: 100%; margin-top: 10px" shadow="never">
        <div class="card">
          <div class="card-item">
            <div class="title"
              >用券老客数<el-tooltip :visible="false" placement="top"
                ><el-icon style="opacity: 0"><QuestionFilled /></el-icon></el-tooltip
            ></div>
            <div class="num">{{ statisticData.formerCount }}</div>
          </div>
          <div class="card-item">
            <div class="title"
              >用券新客数<el-tooltip placement="top" :visible="false"
                ><el-icon style="opacity: 0"><QuestionFilled /></el-icon></el-tooltip
            ></div>
            <div class="num">{{ statisticData.newnessCount }}</div>
          </div>
          <div class="card-item">
            <div class="title"
              >购买套餐数<el-tooltip content="使用该优惠券购买的套餐数量" placement="top"
                ><el-icon><QuestionFilled /></el-icon></el-tooltip
            ></div>
            <div class="num">{{ statisticData.purchaseCount }}</div>
          </div>
        </div>
      </el-card>
    </div>
  </el-dialog>
</template>

<script setup>
import { getStatisticApi } from '@/api/marketing/activity'

const visible = ref(false)
const activityType = ref('')
const statisticData = ref({})

function init(type, couponId) {
  activityType.value = type
  getStatisticApi({ couponId }).then((res) => {
    statisticData.value = res?.data || {}
  })
  visible.value = true
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  transform: translate3d(0, -30px, 0);
  .dec {
    margin-bottom: 10px;
    color: #aaa;
  }
  .type {
    margin-bottom: 10px;
  }
}
.card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
}
</style>
